<!--  -->
<template>
  <div class="header">
     <div class="left"> 
        <img class="logo" src="../../assets/images/logo2.jpg">
         <div class="home" @click="toHome">
             <i class="iconfont icon-zhuye"></i>首页
         </div>
          <div class="tip">admin,下午好！外面的天气好吗？记得朵朵白云曾捎来朋友殷殷的祝福。</div>
     </div>
     <div class="right">
       <TopMenu></TopMenu>
       <div class="outlogin" @click="exitLogin">
        <i class="iconfont icon-tuichu1"></i>退出登录
       </div>
     </div>
  </div>
</template>

<script lang='ts' setup>
import TopMenu from '../home/TopMenu.vue';
import { reactive,toRefs,ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter();
const toHome=()=>{
   router.push("/index");
}
 
const exitLogin=()=>{

 
    //清除所有缓存
   sessionStorage.clear();
   location.reload();

    //跳转到登录页
   // router.push("/login");

}
</script>
<style scoped lang="less">

  .header{
    height: 100%;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    .home{
      cursor: pointer;
      i{
         margin-right:3px;
      }
    }
     .left{
 align-items: center;
 display: flex;
 .logo{
    height: 30px;
    width: auto;
    margin-right: 20px;
 }
 .tip{
    margin-left: 20px;
 }
   
     }
     .right{
        display: flex;
        align-items: center;
        .outlogin{
            cursor: pointer;
            margin-left: 20px;
            i{
                margin-right: 5px;
            }
        }
     }
     
  }
</style>